<template>
  <view
    class="choiceness_c"
    :class="[`selector-query-id-${item?.id}`, border ? 'border' : '']"
    v-for="(item, i) in list"
    :key="item?.id"
    @click="toDetails(item)"
  >
    <view class="headers">
      <view @click.stop="toMypage(item)">
        <u--image :src="item?.avatar" width="67rpx" height="67rpx" radius="50%">
          <template #error class="flex-center-center">
            <view class="ic-error">
              <u-icon
                name="https://ossresource.miyingbl.com/uploads/20240311/h-bl-app/1710155137629"
                size="60"
              ></u-icon>
            </view>
          </template>
        </u--image>
      </view>
      <view class="middle">
        <view class="middle_name"
          ><text @click.stop="toMypage(item)">{{
            item?.nickname ? item?.nickname : '匿名用户'
          }}</text></view
        >
        <view class="middle_tag">
          <view v-if="item?.app_user_tag">
            <view class="tag_icons" v-if="item?.app_user_tag == 'official'">官方账号</view>
            <view class="tag_icons2" v-if="item?.app_user_tag == 'doctor'">专家医生</view>
          </view>
          <text class="u-line-1" v-else>{{
            item?.identity_status_name == '未知' || item?.identity_status_name == '其他'
              ? ''
              : item?.identity_status_name
          }}</text>
        </view>
      </view>
      <view class="right">
        <view
          class="btn flex-center"
          v-if="item?.uid != userStore?.userInfo?.user?.uid && !delShow"
          @click.stop="follow(item, i)"
        >
          {{ item?.is_follow ? '已关注' : '关注' }}</view
        >
        <image
          v-if="!delShow"
          src="@/static/images/close_btn_icon.png"
          @click.stop="deleteArticle(item, i)"
          mode="aspectFill"
        />
      </view>
    </view>

    <!-- 动态 -->
    <view v-if="item?.content_type == 'dt'" class="containers2">
      <view class="content" v-if="item?.title">
        <text class="u-line-1">{{ item?.title }}</text>
      </view>
      <view class="title">
        <!-- <u-parse :content="item?.content"></u-parse> -->
        <!-- <view>{{ getText(item?.content) }}</view> -->
        <view class="dt_content" ref="content">
          {{ extractTextFromRichText(item?.content)?.substring(0, 36) }}
          <text v-if="extractTextFromRichText(item?.content)?.length >= 36" class="text_all">
            ...全文
          </text>
        </view>
      </view>
      <view class="images" v-if="item?.link_url?.[0]?.length">
        <view class="pic_item" v-show="j <= 2" v-for="(url, j) in item?.link_url" :key="j">
          <image :src="url" mode="aspectFill" />
        </view>
      </view>
    </view>

    <!-- 科普 -->
    <view v-else class="containers">
      <view class="container_lt">
        <view class="lt_title">
          <text class="u-line-2">
            {{ item?.title }}
          </text>
        </view>
        <view class="lt_text">
          {{ item?.text_area?.substring(0, 14) }}
          <text v-if="item?.text_area?.length > 14" class="text_all">...全文</text>
        </view>
      </view>
      <view class="img_box">
        <image :src="item?.thumbnail" mode="aspectFill" />
      </view>
    </view>
    <view class="footer">
      <!-- <view class="footer_item" @click.stop="share(item, i)">
        <image class="icon_1" src="@/static/images/home_share_icon.png" />
        <text>分享</text>
      </view> -->
      <view class="footer_item" @click.stop="collect(item, i)">
        <image
          class="icon_1"
          src="https://ossresource.miyingbl.com/uploads/20240314/a5da0f6df2fb58b59c78165331d83d93.png"
          v-if="item?.is_collect == 0"
        />
        <image
          class="icon_1"
          src="https://ossresource.miyingbl.com/uploads/20240314/bee8bc6279b5f19a3ead6d38b9f89f7b.png"
          v-else
        />
        <text>收藏</text>
      </view>
      <view class="footer_item" @click.stop="toComment(item, i)">
        <image class="icon_1" src="@/static/images/home_message_icon.png" />
        <text>{{ item?.comment_number }}</text>
      </view>
      <view class="footer_item" @click.stop="like(item, i)">
        <image
          class="icon_1"
          src="https://ossresource.miyingbl.com/uploads/20240314/a204a2063782c1fcdb76e1785f43ca5d.png"
          v-if="item?.is_like == 0"
        />
        <image
          class="icon_1"
          src="https://ossresource.miyingbl.com/uploads/20240314/bac8a54bb7578defd3fc6864c1893518.png"
          v-else
        />
        <text>{{ item?.zan_number }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { followApi } from '@/services/my/user'
import { showToast, navigateTo } from '@/utils'
import { kepulike, collectPopularApi } from '@/api/kepu'
import { trendsZan, trendsCollect } from '@/api/trends'
import { useMemberStore } from '@/stores'
import { nextTick, ref, onMounted } from 'vue'
import { onReady, onShow } from '@dcloudio/uni-app'
import { articleOperateApi } from '@/api/social'
const userStore = useMemberStore()
//分享
const shareRef = ref(null)
const toComment = (item, i) => {
  navigateTo(
    `${item.content_type == 'dt' ? '/socials/detail/index' : '/baby/science/index'}?&id=${
      item.id
    }&isCom=true&type=${item.type}`,
    0,
  )
}

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  border: {
    type: Boolean,
    default: false,
  },
  uid: {
    type: String,
    default: '',
  },
  delShow: {
    type: Boolean,
  },
})
async function collect(row, i) {
  const userStore = useMemberStore()
  if (!userStore.token) {
    emit('toLogin')
    return false
  }

  if (row.content_type == 'dt') {
    // 动态
    const res = await articleOperateApi({
      article_id: row.id,
      type: 2,
      tab: 1, //1=帖子2=科普
    })
    if (row.is_collect) {
      row.collect_number--
    } else {
      row.collect_number++
    }
    row.is_collect = !row.is_collect
    showToast(res.message)
    // emit('updateList', row, i, 'is_collect')
  } else {
    // 科普
    const res = await articleOperateApi({
      article_id: row.id,
      type: 2,
      tab: 2, //1=帖子2=科普
    })
    if (row.is_collect) {
      row.collect_number--
    } else {
      row.collect_number++
    }
    row.is_collect = !row.is_collect
    showToast(res.message)
    // emit('updateList', row, i, 'is_collect')
  }
}

// function share(item) {
// }
// 打开分享
function share(item) {
  emit('share', item)
}
async function like(row, i) {
  const userStore = useMemberStore()
  if (!userStore.token) {
    emit('toLogin')
    return false
  }
  if (row.content_type == 'dt') {
    // 动态
    const res = await articleOperateApi({
      article_id: row.id,
      type: 1,
      tab: 1, //1=帖子2=科普
    })
    // const res = await trendsZan({
    //   id: row.id,
    //   zan_type: 1,
    // })
    showToast(res.message)
    // emit('updateList', row, i, 'is_like')
    if (row.is_like) {
      row.zan_number--
    } else {
      row.zan_number++
    }
    row.is_like = !row.is_like
  } else {
    // 科普
    const res = await articleOperateApi({
      article_id: row.id,
      type: 1,
      tab: 2, //1=帖子2=科普
    })
    if (row.is_like) {
      row.zan_number--
    } else {
      row.zan_number++
    }
    showToast(res.message)
    row.is_like = !row.is_like
  }
}

function extractTextFromRichText(html) {
  const re1 = new RegExp('<.+?>', 'g') // 匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
  const arrEntities = {
    lt: '<',
    gt: '>',
    nbsp: ' ',
    amp: '&',
    quot: '"',
    ldquo: '“',
    mdash: '—',
    rdquo: '”',
  }

  return html
    .replace(re1, '')
    .replace(/&(lt|gt|nbsp|amp|quot|ldquo|mdash|rdquo);/gi, function (all, t) {
      return arrEntities[t]
    })
}

async function follow(row, i) {
  const userStore = useMemberStore()
  if (!userStore.token) {
    emit('toLogin')
    return
  }
  try {
    const uid = row.uid ? row.uid : row.user_id
    const res = await followApi({
      follow_user_id: uid,
      type: 1,
    })
    showToast(res.message)
    // row.is_follow = !row.is_follow

    emit('followListRefresh', true)
    emit('updateList', row, i, 'is_follow')
  } catch (error) {
    console.log(error)
  }
}
function toMypage(row) {
  // if (row.app_user_tag) {
  //   if(row.uid )
  //   navigateTo(
  //     `/pages-users/my-page/official-doctor-home?is_self=0&uid=${row.uid}&type=${row.content_type}&tag=${row.app_user_tag}`,
  //     0,
  //   )
  // } else {
  //   navigateTo('/pages-users/my-page/index?is_self=0&uid=' + row?.uid + '&type=' + row.content_type)
  // }
  if (row.uid == props.uid || row.user_id == props.uid) {
    return false
  } else if (props.uid && row.uid != props.uid) {
    if (row.app_user_tag) {
      navigateTo(
        `/pages-users/my-page/official-doctor-home?uid=${row.uid}&type=${row.content_type}&tag=${row.app_user_tag}`,
        0,
      )
    } else {
      navigateTo('/pages-users/my-page/other-index?uid=' + row.uid + '&type=' + row.content_type, 0)
    }
  }
}
function toDetails(row) {
  navigateTo(
    `${row.content_type == 'dt' ? '/socials/detail/index' : '/baby/science/index'}?&id=${row.id}`,
    0,
  )

  // emit('itemTap', row)
  // navigateTo(
  //   `${row.content_type == 'dt' ? '/social/detail/index' : '/baby/science/index'}?&id=${row.id}`,
  //   0,
  // )
}

const emit = defineEmits([
  'deleteArticle',
  'itemTap',
  'updateList',
  'toLogin',
  'share',
  'followListRefresh',
])
// 删除该文章
function deleteArticle(row, index) {
  emit('deleteArticle', row, index)
}

function forMatStatus(status) {
  let text = ''
  switch (status) {
    case 0:
      text = ''
      break
    case 1:
      text = '记经期'
      break
    case 2:
      text = '备孕中'
      break
    case 3:
      text = '怀孕中'
      break
    case 4:
      text = '宝宝已出生'
      break
    case 5:
      text = '未婚'
      break
    case 6:
      text = '准爸'
      break

    case 7:
      text = '爸爸'
      break
    case 8:
      text = '生产育儿'
      break
    case 9:
      text = '慢病'
      break
    case 10:
      text = '其他'
      break
  }
  return text
}
</script>

<style lang="scss" scoped>
.choiceness_c {
  width: 702rpx;
  height: auto;
  margin: 0 auto;
  margin-bottom: 20rpx;
  padding: 34rpx 25rpx 24rpx;
  background: #ffffff;
  border-radius: 12rpx 12rpx 12rpx 12rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  &.border {
    border: 1rpx solid #e6e6e6;
  }

  .headers {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 67rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    & > image {
      width: 67rpx;
      height: 67rpx;
      background-color: #eee;
      border-radius: 50%;
      margin-right: 9rpx;
      display: block;
    }

    & > .middle {
      flex: 1;
      padding-left: 10rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .middle_name {
        font-weight: 500;
        font-size: 28rpx;
        color: #000000;
        margin-bottom: 5rpx;
      }

      .middle_tag {
        font-weight: 500;
        font-size: 22rpx;
        color: #969696;
        display: flex;
        align-items: center;

        .text_name {
          width: 253rpx;
          height: 31rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 22rpx;
          color: #969696;
          line-height: 26rpx;
          text-align: left;
          line-height: 31rpx;
          font-style: normal;
          text-transform: none;
        }

        .tag_icons {
          width: 112rpx;
          height: 27rpx;
          background: url('@/static/images/home_icon_1.png') center center;
          background-size: 100% 100%;
          line-height: 27rpx;
          font-weight: 500;
          font-size: 18rpx;
          color: #ffffff;
          margin-right: 8rpx;
          padding-left: 30rpx;
        }

        .tag_icons2 {
          width: 112rpx;
          height: 27rpx;
          background: url('@/static/images/home_icon_2.png') center center;
          background-size: 100% 100%;
          line-height: 27rpx;
          font-weight: 500;
          font-size: 18rpx;
          padding-left: 30rpx;
          color: #ffffff;
          margin-right: 8rpx;
        }
      }
    }

    & > .right {
      display: flex;
      height: 67rpx;
      align-items: flex-start;

      .btn {
        padding: 0 8rpx;
        height: 32rpx;
        background: #ffffff;
        border-radius: 48rpx 48rpx 48rpx 48rpx;
        border: 1rpx solid #ffb300;
        margin-right: 19rpx;
        font-weight: 500;
        font-size: 22rpx;
        color: #ffb300;
      }

      image {
        width: 26rpx;
        height: 32rpx;
      }
    }
  }

  .containers2 {
    width: 100%;

    .dt_content {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #666666;
      position: relative;
    }
    .text_all {
      position: absolute;
      bottom: 0;
      left: auto;
      padding-left: 3rpx;
      font-size: 28rpx;
      color: #305e9d;
    }

    .content {
      margin-top: 20rpx;
    }

    .title {
      width: 100%;
      font-weight: 500;
      font-size: 28rpx;
      color: #666666;
      margin-top: 16rpx;
      line-height: 33rpx;
      position: relative;
    }
  }

  .containers {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    margin-top: 19rpx;

    .container_lt {
      flex: 1;
      display: flex;
      flex-direction: column;

      .lt_title {
        font-weight: 600;
        font-size: 30rpx;
        color: #333333;
      }

      .lt_text {
        margin-top: 5rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #666666;
        .text_all {
          color: #305e9d;
        }
      }
    }

    .img_box {
      width: 143rpx;
      height: 137rpx;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      margin-left: 15rpx;
      background-color: #eee;

      image {
        width: 143rpx;
        height: 137rpx;
        border-radius: 10rpx 10rpx 10rpx 10rpx;
        background-color: #eee;
      }
    }
  }

  & > .content {
    width: 100%;
    font-weight: 500;
    font-size: 28rpx;
    color: #666666;
    margin-top: 16rpx;
  }

  .images {
    width: 100%;
    align-items: center;
    margin-top: 20rpx;
    overflow: hidden;

    .pic_item {
      width: 33.333%;
      float: left;
      height: 216rpx;
      box-sizing: border-box;
      padding: 1%;

      &:nth-child(3n + 1) {
        margin-left: 0;
      }

      image {
        width: 100%;
        height: 100%;
        border-radius: 10rpx;
      }
    }
  }

  & > .footer {
    width: 100%;
    height: 36%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 26rpx;

    .footer_item {
      display: flex;
      align-items: center;

      .icon_1 {
        width: 26rpx;
        height: 26rpx;
      }

      .icon_3 {
        width: 25rpx;
        height: 24rpx;
      }

      text {
        margin-left: 15rpx;
        font-weight: 500;
        font-size: 26rpx;
        color: #333333;
      }
    }
  }
}
</style>
